import React, { Component } from 'react'
import{NewTaskContainer} from './StyledChildView'
import Navigation from 'components/Navigation/Navigation'
import back from 'images/home/task/a@3x.png'
import Banner from 'images/home/task/Banner@3x.png'
import more from 'images/home/task/gengduo@2x.png'
import gift from 'images/home/sign/gift@2x.png'


const taskArr = [
    {
        mImg:gift,
        tname:"完成一次任务",
        mBtn:'去完成',  
        tcontent:"恭喜你，你获得了一只小猪佩奇",
        tid:1
    },
    {
        mImg:gift,
        tname:"完成二次任务",
        mBtn:'去完成',  
        tcontent:"恭喜你，你获得了一只招财猫",
        tid:2
    },
    {
        mImg:gift,
        tname:"完成三次任务",
        mBtn:'去完成',  
        tcontent:"恭喜你，你获得了一支魔法棒",
        tid:3
    },
    {
        mImg:gift,
        tname:"完成二次任务",
        mBtn:'去完成',  
        tcontent:"恭喜你，你获得了一只招财猫",
        tid:4
    },
    {
        mImg:gift,
        tname:"完成三次任务",
        mBtn:'去完成',  
        tcontent:"恭喜你，你获得了一支魔法棒",
        tid:5
    }
]


export default class NewTask extends Component {
    state = {
        newTaskList :[]
    }
    componentDidMount(){
        fetch("/Legang/task/findinvite",{   
            method:"POST",
            headers:{
                "Content-type":"application/x-www-form-urlencoded",
                },
            })   
            .then(response => response.json())
            .then(result=>{
                console.log(result.data)
                this.setState({
                    newTaskList : result.data
                }
                )
            }) 
    }
    render() {
        return (
            <NewTaskContainer>
               <Navigation
                title = "新手任务"
                backgroundColor='#fff'
                titleColor="#646464"
                fontSize=".18rem"
                leftMargin = '0 0 0 .15rem'
                leftWidth = '25%'
                leftHeight = '.44rem'
                leftImg = {back}
                leftImgWidth = '.2rem'
                clickLeft = {()=>this.onClickLeft("left")}
                ></Navigation>
                <div className="newWrap">
                    <div className="taskPic">
                        <img src={Banner} alt=""/>
                    </div>
                    <div className="hallTask">
                        <div><h3>任务大厅</h3></div>
                        <div><img className="more" src={more} onClick={()=>this.moreChange()} alt=""/></div>
                    </div>
                    <div className="taskList">
                        <ul>
                            {
                              (this.state.newTaskList!==[]?this.state.newTaskList:taskArr).map((value,index)=>(
                                <li key={value.tid} >
                                     <div className="newtask">
                                  
                                       <div className="newgif">
                                       <img src={gift} alt=""/>
                                       
                                       <div className="taskTitle">
                                           <h3>{value.tname}</h3>
                                           <p className="taskMoney">{value.tcontent}</p>
                                       </div>
                                       </div>
                                        <div className="rightTask">
                                            <p className="rBtn"  onClick = {()=>this.finishChange(value.tid)}>去完成</p>
                                        </div>
                                        
                                    </div>
                                </li>
                                ))
                               
                            }
                            
                            
                        </ul>
                    </div>
                    </div>
                </NewTaskContainer>
           
        )
    }
    onClickLeft(tag){
        this.props.history.go(-1)
    }
    finishChange(tid){
        console.log(tid)
        // this.props.history.push('/index/hall/whole'+ tid)
        this.props.history.push( {pathname:"/hallChildRouter/taskInfo/" + tid})
       
    }
    moreChange(){
        console.log("点击进入大厅")
        this.props.history.push('/index/hall/whole')
    }
}
